<style>
  .border {
      border: 1px solid #e6e6e6;
  }
  .u-m-r-5 {
      margin-right: 5px;
  }
</style>

<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">
    <div style="margin: 20px 0;">
      <h5 class="text-center">(2021)安管人员区县新考第4281期</h5>
      <div class="layui-panel border">
        <div style="padding: 20px 10px;">
          <span class="u-m-r-5">考试人数：20人</span>
          <span class="u-m-r-5">已答人数：16人</span>
          <span class="u-m-r-5">未答人数：4人</span>
          <span class="u-m-r-5">通过人数：5人</span>
          <span>未通过人数：15人</span>
        </div>
      </div>
    </div>
    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">报考类型</label>
              <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao">
                  <option value=""></option>
                  <option value="0">写作</option>
                  <option value="1" selected="">阅读</option>
                  <option value="2">游戏</option>
                  <option value="3">音乐</option>
                  <option value="4">旅行</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input" placeholder="请输入分数">
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input" placeholder="请输入姓名，准考证">
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao">
                  <option value=""></option>
                  <option value="0">全部</option>
                  <option value="0">B</option>
                  <option value="1" selected="">C</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                      class="layui-icon"></i> 查询
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>
    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    <script type="text/html" id="tableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" href="javascript:;" layuimini-content-href="/static/exam/page/exam/user_info.html" data-title="考试信息" >查看</a>
    </script>
    <script type="text/html" id="tableAction">
      <select lay-ignore lay-event="change">
        <option value="1">正常</option>
        <option value="0">异常</option>
      </select>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="action">交卷</a>
    </script>
  </div>
</div>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    }
  ]
  layui.use(['form', 'table', 'miniPage', 'element', 'laydate'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      laydate = layui.laydate,
      miniPage = layui.miniPage

    table.render({
      elem: '#currentTableId',
      // url: 'api/table.json',
      data: tableData,
      toolbar: true,
      defaultToolbar: ['filter', 'exports', 'print'],
      cols: [[
        { field: 'id', title: 'ID', sort: true },
        { field: 'count', title: '准考证号' },
        { field: 'name', title: '姓名'},
        { field: 'name', title: '性别'},
        { field: 'idCard', title: '身份证号' },
        { field: 'name', title: '联系电话'},
        { field: 'type', title: '报考类型' },
        { field: 'type', title: '所属单位' },
        { field: 'type', title: '所在区域' },
        { field: 'type', title: '职位' },
        { field: 'type', title: '成绩' },
        {  title: '考试信息', toolbar: '#tableBar', align: 'center' },
        {  title: '操作', toolbar: '#tableAction', align: 'center', minWidth: 150 }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      skin: 'line'
    })

    // 操作
    table.on('tool(currentTableFilter)', function (obj) {
      switch (obj.event) {
        case 'action':
          console.log('交卷')
          break
        case 'change':
          console.log('切换')
          break
      }
    })

  })
</script>

